<template>
<!-- 面板 -->
<el-card class="box-card" shadow="never">
  <!-- 筛选区域 start-->
  <el-form ref="form" :model="form" label-width="80px" class="el-col-18 form">
  <label style="width:80px">关键字</label>
  <el-input v-model="form.keyword" style="width:188px" size="small"></el-input>
  <label style="width:80px">状态</label>
   <el-select v-model="form.state" placeholder="请选择" size="small">
    <el-option  :value="1" label="启用"></el-option>
    <el-option  :value="0" label="禁用"></el-option>
  </el-select>
  <el-button size="small" class="m_left" @click="resetForm">清除</el-button>
  <el-button type="primary" size="small" @click="search">搜索</el-button>
  </el-form>
    <!-- 筛选区域 end-->
    <!-- 新增技巧 start -->
<el-button type="success" size="small" class="el-icon-edit right" @click="add">新增技巧</el-button>
    <!-- 新增技巧 end -->
    <!-- 消息提示 start -->
    <el-alert
    type="info"
    show-icon
    :closable="false">
    <span style="font-size:13px"
     >数据一共{{total}}条</span>
  </el-alert>
    <!-- 消息提示 end -->
    <!-- 表单start -->
<el-table
      :data="tableData"
      style="width: 100%"
      class="table"
     :row-style="{height: '60px'}"
      >
      <el-table-column
        prop="id"
        label="序号"
        width="80"
        >
      </el-table-column>
      <el-table-column
        label="文章标题"
        width="380">
        <template slot-scope="scope">
          {{scope.row.title}}
          <span v-if="scope.row.videoURL"
          class="el-icon-film"
          style="color:blue; cursor:pointer"
           @click="openVideo(scope.row.videoURL)"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="visits"
        label="阅读数">
      </el-table-column>
      <el-table-column
        prop="username"
        label="录入人">
      </el-table-column>
      <el-table-column
        label="录入时间"
        >
    <template slot-scope="scope">
      {{scope.row.createTime |formatDate }}
    </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="100"
        >
        <template slot-scope="scope">
      {{formatState(scope.row.state)}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="190"
        >
        <template slot-scope="scope">
          <div class="button">
              <span @click="preview(scope.row)">预览</span>
              <span v-if="scope.row.state===0" @click="on(scope.row.id)">启用</span>
              <span v-if="scope.row.state===1" @click="off(scope.row.id)">禁用</span>
              <span v-if="scope.row.state===0" @click="update(scope.row)">修改</span>
              <span v-if="scope.row.state===0" @click="del(scope.row.id)">删除</span>
              <span style="cursor:not-allowed; color:#ccc" v-if="scope.row.state===1">修改</span>
               <span style="cursor:not-allowed; color:#ccc" v-if="scope.row.state===1">删除</span>
            </div>
          </template>
      </el-table-column>
    </el-table>
    <!-- 表单end -->
    <!-- 分页 start -->
  <el-pagination
    background
    layout="prev, pager, next,sizes,jumper"
    :total="total"
    :current-page="page"
    :page-sizes="[5, 10, 20, 50]"
    @size-change="handleSizeChange"
    @current-change="ChangePage"
    class="page"
    >
  </el-pagination>
    <!-- 分页 end -->
    <!-- 视频弹框 -->
    <el-dialog
    title="播放视频"
    :visible.sync="videoShow"
    width="50%"
    :before-close="handleClose"
    center
    >
  <video :src="videoURL" style="width:100%" controls autoplay muted></video>
</el-dialog>
    <!-- 定义添加/修改组件 -->
    <articles-add ref="articlesAdd"
    @update-load="hList"
    ></articles-add>
    <!-- 定义预览组件 -->
    <articles-preview ref="articlesPreview"></articles-preview>
</el-card>
</template>

<script>
// 导入渲染列表、文章状态、删除接口
import { list, changeState, remove } from '@/api/hmmm/articles'
// 引入moment处理时间
import moment from 'moment'
// 导入子组件
import ArticlesAdd from '../components/articles-add'
import ArticlesPreview from '../components/articles-preview'
export default {
  // 注册组件
  components: {
    ArticlesAdd, ArticlesPreview
  },
  data () {
    return {
      tableData: [], // 存放表格数据
      videoURL: '', // 视频URL
      videoShow: false, // 视频是否显示
      total: 0, // 总条数
      page: 1, // 页码数
      pagesize: 10, // 一页几条
      channels: [],
      edit: true,
      dialogVisible: false, // 弹框是否显示
      sendVal: false,
      form: {
        keyword: '', // 关键字
        state: null // 状态

      }
    }
  },
  methods: {
    // 获取文章列表
    hList () {
      const data = {
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.form.keyword,
        state: this.form.state
      }
      list(data).then((res) => {
        // console.log(res)
        this.tableData = res.data.items
        this.total = res.data.counts
      })
    },
    // 页码数改变时触发的方法
    ChangePage (val) {
      // console.log(val)
      this.page = val
      this.hList()
    },
    // 每页条数改变时触发的方法
    handleSizeChange (val) {
      // console.log(val)
      this.pagesize = val
      this.hList()
      this.page = 1
    },
    // 对应的规则转换
    formatState (obj) {
      const state = {
        1: '已启用',
        0: '已禁用'
      }
      return state[obj]
    },
    // 点击搜索按钮渲染页面
    search () {
      this.hList()
    },
    // 点击清除清除输入框内容
    resetForm () {
      this.form.keyword = ''
      this.form.state = null
      this.hList()
    },
    // 启用按钮
    on (id) {
      const params = {
        id,
        state: 1
      }
      changeState(params).then(res => {
        //     console.log(res)
        this.hList()
        //   })
      })
    },
    // 禁用按钮
    off (id) {
      const params = {
        id,
        state: 0
      }
      changeState(params).then(res => {
        //     console.log(res)
        this.hList()
        //   })
      })
    },
    // 删除按钮
    del (id) {
      const params = {
        id
      }
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(params).then(res => {
        // console.log(res)
          this.hList()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // this.hList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增文章
    add () {
      const row = {
        id: null,
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$refs.articlesAdd.recive(row) // 内容回填显示
      this.$refs.articlesAdd.dialogFromShow()// 控制弹框显示
    },
    // 修改文章
    update (row) {
      this.$refs.articlesAdd.dialogFromShow()
      this.$refs.articlesAdd.recive(row)
    },
    // 预览
    preview (row) {
      this.$refs.articlesPreview.dialogFromShow()
      this.$refs.articlesPreview.getDetail(row)
    },
    // 点击打开视频
    openVideo (videoURL) {
      this.videoURL = videoURL
      this.videoShow = true
    },
    // 弹框关闭前的回调
    handleClose () {
      // console.log('11')
      this.videoShow = false
      this.videoURL = ''
    }
  },
  // 过滤器处理时间
  filters: {
    formatDate: function (time) {
      return moment(time).format('YYYY-MM-DD  hh:mm:ss')
    }
  },
  mounted () {
    this.hList()
  }
}
</script>

<style scoped lang='less'>

  .box-card {
    width: 97%;
    margin: 20px;
    box-sizing: border-box;
  }
label{
  font-weight: 700;
  margin-left: 25px;
  margin-right: 15px;
  font-size: 14px;
  color: #606266;
}
label:nth-of-type(2){
  margin-left: 50px;
}
.m_left {
  margin-left: 10px;
}
.right {
  float: right;
}
.form{
  margin-bottom: 20px;
}
.table{
  margin-top: 20px;

}
.page {
  margin: 20px 0;
  float: right;
}
.button {
  cursor: pointer;
  color:#409EFF;

}
.button span {
  padding: 0 5px;
}
.button span:nth-of-type(1){
  padding-left: 0;
}
.button span:nth-of-type(2){
  padding-right: 8px;
}
 .ql-align-center>img {
  width: 100%;
}
</style>
